<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title># Quickrefs CLI

## 项目介绍
 该项目是从[refs-cli](https://github.com/jaywcjlove/refs-cli)（ 原作者：[小弟调调](https://github.com/jaywcjlove)）上衍生出来的一个分支，用于帮助快速搭建博客网站，它能扫描 .md 文件并打包生成样式美观的 .html 文件

## 为什么不直接向原始项目贡献代码，而是另开一个分支？
1. 1、原始项目采用命令行参数来丰富cli的功能，与我想要在.refsrc.json中配置的理念不太契合
2. 2、原始项目在ts校验和单元测试上不够严格，我难以保证自己的代码不会污染这个优秀的项目
3. 3、以上的点其实都是可以克服的，但是我没有太多时间，如果有时间我肯定会再仔细研究研究这个项目

## 修改内容
该版本在[refs-cli](https://github.com/jaywcjlove/refs-cli)的基础上做了如下修改：

|对比项|refs-cli|quickref-cli|
|---|---|---|
|input目录|`docs` 不可更改|可在.refsrc.json中配置|
|附件目录|无|可在.refsrc.json中配置|
|`watch` 类型|`change`|`change`、`add`、`addDir`、`unlink`、`unlinkDir`|
|`watch` 范围|README.md、style/*.css、js/*.js、docs/|README.md、input目录、附件目录|
|实时预览结果|无|通过集成`live-server`，实现边写边在浏览器实时预览|
|配置方式|`refs-cli -o ./dir` 命令行参数|在`.refsrc.json`中配置|
&#x3C;!--rehype:className &#x26;   Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="# Quickrefs CLI
. Sharing Quick Reference Cheat Sheets for Developers">
<meta keywords="reference-cli,reference,refs-cli,refs,cli">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="style\style.css">
<link rel="stylesheet" href="style\katex.css">
</head>
<body class="home"><nav class="header-nav"><div class="max-container"><a class="logo" href="index.html"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
  <path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
  <path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
  <path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
  <path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
  <path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="js/dark.js?v=0.2.17"></script><a href="https://github.com/yacshy/yacshy.github.io" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="quickrefs-cli"><a aria-hidden="true" tabindex="-1" href="#quickrefs-cli"><span class="icon icon-link"></span></a>Quickrefs CLI</h1><div class="wrap-body">
</div></header><div class="h1wrap-body"><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="项目介绍"><a aria-hidden="true" tabindex="-1" href="#项目介绍"><span class="icon icon-link"></span></a>项目介绍</h2><div class="wrap-body">
<p>该项目是从<a href="https://github.com/jaywcjlove/refs-cli">refs-cli</a>（ 原作者：<a href="https://github.com/jaywcjlove">小弟调调</a>）上衍生出来的一个分支，用于帮助快速搭建博客网站，它能扫描 .md 文件并打包生成样式美观的 .html 文件</p>
</div></div><div class="h2wrap-body"></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="为什么不直接向原始项目贡献代码而是另开一个分支"><a aria-hidden="true" tabindex="-1" href="#为什么不直接向原始项目贡献代码而是另开一个分支"><span class="icon icon-link"></span></a>为什么不直接向原始项目贡献代码，而是另开一个分支？</h2><div class="wrap-body">
<ol>
<li>1、原始项目采用命令行参数来丰富cli的功能，与我想要在.refsrc.json中配置的理念不太契合</li>
<li>2、原始项目在ts校验和单元测试上不够严格，我难以保证自己的代码不会污染这个优秀的项目</li>
<li>3、以上的点其实都是可以克服的，但是我没有太多时间，如果有时间我肯定会再仔细研究研究这个项目</li>
</ol>
</div></div><div class="h2wrap-body"></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="修改内容"><a aria-hidden="true" tabindex="-1" href="#修改内容"><span class="icon icon-link"></span></a>修改内容</h2><div class="wrap-body">
<p>该版本在<a href="https://github.com/jaywcjlove/refs-cli">refs-cli</a>的基础上做了如下修改：</p>








































<table class="show-header"><thead><tr><th>对比项</th><th>refs-cli</th><th>quickref-cli</th></tr></thead><tbody><tr><td>input目录</td><td><code>docs</code> 不可更改</td><td>可在.refsrc.json中配置</td></tr><tr><td>附件目录</td><td>无</td><td>可在.refsrc.json中配置</td></tr><tr><td><code>watch</code> 类型</td><td><code>change</code></td><td><code>change</code>、<code>add</code>、<code>addDir</code>、<code>unlink</code>、<code>unlinkDir</code></td></tr><tr><td><code>watch</code> 范围</td><td>README.md、style/<em>.css、js/</em>.js、docs/</td><td>README.md、input目录、附件目录</td></tr><tr><td>实时预览结果</td><td>无</td><td>通过集成<code>live-server</code>，实现边写边在浏览器实时预览</td></tr><tr><td>配置方式</td><td><code>refs-cli -o ./dir</code> 命令行参数</td><td>在<code>.refsrc.json</code>中配置</td></tr></tbody></table>
<!--rehype:className=show-header-->
<p><strong>综述</strong>：该分支在原始项目的基础上增加了附件模块，提供更丰富和灵活的配置，通过集成live-server为使用者提供了更舒适的编写体验</p>
</div></div><div class="h2wrap-body"></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="使用方法"><a aria-hidden="true" tabindex="-1" href="#使用方法"><span class="icon icon-link"></span></a>使用方法</h2><div class="wrap-body">
<p>1、安装</p>
<pre><code class="language-cmd code-highlight"><span class="code-line">npm i quickref-cli -g
</span></code></pre>
<p>2、按要求严格创建项目目录</p>
<pre><code class="language-cmd code-highlight"><span class="code-line">├─input
</span><span class="code-line">├─attachments
</span><span class="code-line">├─README.md
</span><span class="code-line">└─.refsrc.json
</span></code></pre>






























<table class="show-header"><thead><tr><th>名字</th><th>描述</th><th>备注</th></tr></thead><tbody><tr><td>input</td><td>输入目录</td><td>可自定义名字；里面的.md将被打包成.html</td></tr><tr><td>attachments</td><td>附件目录</td><td>可自定义名字</td></tr><tr><td>README.md</td><td>博客首页</td><td>不可自定义名字；将被打包成index.html</td></tr><tr><td>.refsrc.json</td><td>配置文件</td><td>不可自定义名字</td></tr></tbody></table>
<!--rehype:className=show-header-->
</div></div><div class="h2wrap-body"></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="指令"><a aria-hidden="true" tabindex="-1" href="#指令"><span class="icon icon-link"></span></a>指令</h2><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">Usage: quickref-cli <span class="token punctuation">[</span>output-dir<span class="token punctuation">]</span> <span class="token punctuation">[</span>--help<span class="token operator">|</span>h<span class="token punctuation">]</span>
</span><span class="code-line">  Displays <span class="token builtin class-name">help</span> information.
</span><span class="code-line">
</span><span class="code-line">Options:
</span><span class="code-line">  --help, <span class="token parameter variable">-h</span>      Displays <span class="token builtin class-name">help</span> information.
</span><span class="code-line">  --version, <span class="token parameter variable">-v</span>   Show version number
</span><span class="code-line">  --watch, <span class="token parameter variable">-w</span>     Watch and compile Markdown files.
</span><span class="code-line">
</span><span class="code-line">Example:
</span><span class="code-line">  $ <span class="token function">npm</span> i quickref-cli <span class="token parameter variable">-g</span>
</span><span class="code-line">  $ quickref-cli
</span><span class="code-line">  $ quickref-cli <span class="token parameter variable">-w</span>
</span><span class="code-line">
</span><span class="code-line">quickrefs-cli@v1.0.0
</span></code></pre>
</div></div><div class="h2wrap-body"></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="refsrcjson配置"><a aria-hidden="true" tabindex="-1" href="#refsrcjson配置"><span class="icon icon-link"></span></a>.refsrc.json配置</h2><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Quick Reference"</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"{{description}}. Sharing Quick Reference Cheat Sheets for Developers"</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"keywords"</span><span class="token operator">:</span> <span class="token string">"reference-cli,reference,refs-cli,refs,cli"</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"data-info"</span><span class="token operator">:</span> <span class="token string">"👆👆need your participation"</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"search"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">        <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"搜索"</span><span class="token punctuation">,</span>
</span><span class="code-line">        <span class="token property">"placeholder"</span><span class="token operator">:</span> <span class="token string">"请输入搜索内容"</span><span class="token punctuation">,</span>
</span><span class="code-line">        <span class="token property">"cancel"</span><span class="token operator">:</span> <span class="token string">"取消"</span>
</span><span class="code-line">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"editor"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">        <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"编辑"</span><span class="token punctuation">,</span>
</span><span class="code-line">        <span class="token property">"disabled"</span><span class="token operator">:</span> <span class="token boolean">true</span>
</span><span class="code-line">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"github"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">        <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://github.com/yacshy/yacshy.github.io"</span>
</span><span class="code-line">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"inputDir"</span><span class="token operator">:</span> <span class="token string">"./refs"</span><span class="token punctuation">,</span>                     <span class="token comment">// 输入目录</span>
</span><span class="code-line">    <span class="token property">"outputDir"</span><span class="token operator">:</span> <span class="token string">"./docs"</span><span class="token punctuation">,</span>                    <span class="token comment">// 输出目录</span>
</span><span class="code-line">    <span class="token property">"attachmentDir"</span><span class="token operator">:</span> <span class="token string">"./attachments"</span><span class="token punctuation">,</span>         <span class="token comment">// 附件目录</span>
</span><span class="code-line">    <span class="token property">"server"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                               <span class="token comment">// 在本地8181启动一个服务器，热更新，方便一边写一遍看</span>
</span><span class="code-line">        <span class="token property">"port"</span><span class="token operator">:</span> <span class="token number">8181</span><span class="token punctuation">,</span>                         <span class="token comment">// 服务器端口</span>
</span><span class="code-line">        <span class="token property">"root"</span><span class="token operator">:</span> <span class="token string">"./docs"</span><span class="token punctuation">,</span>                     <span class="token comment">// 在哪个目录下启动服务器？（一般和输出目录保持一致）</span>
</span><span class="code-line">        <span class="token property">"file"</span><span class="token operator">:</span> <span class="token string">"index.html"</span>                  <span class="token comment">// 服务器入口页面（一般是index.html）</span>
</span><span class="code-line">    <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div><div class="h2wrap-body"></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="语法"><a aria-hidden="true" tabindex="-1" href="#语法"><span class="icon icon-link"></span></a>语法</h2><div class="wrap-body">
<p>为了创建你想要的、美观的博客，我们还需要掌握一些“语法”，不然你就只能创建简单的博客网站，尽管这个脚手架打包后的默认样式已经挺美观的了，但我仍然建议了解一点简单的语法</p>
<p><img src="./attachments/demo.png" alt="pic" style="width: 100%; overfollow: hidden; object-fit: contain; "><!--rehype:style=width: 100%; overfollow: hidden; object-fit: contain; --></p>
</div></div><div class="h2wrap-body"></div></div></div></div><script src="data.js?v=0.2.17" defer></script><script src="js/fuse.min.js?v=0.2.17" defer></script><script src="js/main.js?v=0.2.17" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="请输入搜索内容" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">取消</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
